import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import LoginView from '../views/login/LoginView.vue'
import LoginSetting from '../views/login/LoginSetting.vue'
import RegisterView from '../views/login/RegisterView.vue'

import HomeView from '../views/home/HomeView.vue'
import MakeSubtotal from '../views/home/MakeSubtotal.vue'
import MonthArticlesView from '../components/home/MonthArticlesView.vue'
import SaveView from '../views/home/SaveView.vue'
import AlterImg from '../views/home/AlterImg.vue'
import ArticleDetail from '../views/home/ArticleDetail.vue'
import CommentView from '../views/home/CommentView.vue'
import RadioView from '../views/home/RadioView.vue'

import DiscoverView from '../views/discover/DiscoverView.vue'
import DiscoverImg from '../views/discover/DiscoverImg.vue'
import DiscoverHp from '../views/discover/DiscoverHp.vue'
import AuthorDetail from '../views/discover/AuthorDetail.vue'
import DiscoverSelect from '../views/discover/DiscoverSelect.vue'

import SerializeView from '../views/serialize/SerializeView.vue'
import SerializeBook from '../views/serialize/SerializeBook.vue'

import UserView from '../views/user/UserView.vue'
import UserSetting from '../views/user/UserSetting.vue'
import UserHp from '../views/user/UserHp.vue'
import UserArticle from '../views/user/UserArticle.vue'
import UserRadio from '../views/user/UserRadio.vue'
import UserMusic from '../views/user/UserMusic.vue'
import UserFilm from '../views/user/UserFilm.vue'
import UserFocus from '../views/user/UserFocus.vue'

import ShareView from '../views/ShareView.vue'
import SearchView from '../views/SearchView.vue'


const routes: Array<RouteRecordRaw> = [
  {
    path: '/login',
    name: 'login',
    component: LoginView,
    meta: {
      showTabbar: true
    }
  },
  {
    path: '/login/setting',
    name: 'login-setting',
    component: LoginSetting,
    meta: {
      showTabbar: true
    }
  },
  {
    path: '/login/Register',
    name: 'login-register',
    component: RegisterView,
    meta: {
      showTabbar: true
    }
  },
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'home',
    component: HomeView,
    children: [
      {
        path: '/home/month-article',
        name: 'month-article',
        component: MonthArticlesView,
        meta: {
          showTabbar: true
        }
      }
    ]
  },
  {
    path: '/make-subtotal',
    name: 'make-subtotal',
    component: MakeSubtotal,
    props: true,
    meta: {
      showTabbar: true
    },
    children: [
      {
        path: '/make-subtotal/save',
        name: 'save',
        component: SaveView,
        meta: {
          showTabbar: true
        }
      },
      {
        path: '/make-subtotal/alter-img',
        name: 'alter-img',
        component: AlterImg,
        meta: {
          showTabbar: true
        }
      },
    ]
  },
  {
    path: '/article-detail',
    name: 'article-detail',
    component: ArticleDetail,
    meta: {
      showTabbar: true
    }
  },
  {
    path: '/comment',
    name: 'comment',
    component: CommentView,
    meta: {
      showTabbar: true
    }
  },
  {
    path: '/radio',
    name: 'radio',
    component: RadioView,
    meta: {
      showTabbar: true
    }
  },
  {
    path: '/discover',
    name: 'discover',
    component: DiscoverView,
    children: [
      {
        path: '/discover/img',
        name: 'discover-img',
        component: DiscoverImg,
        meta: {
          showTabbar: true
        }
      },
      {
        path: '/discover/hp',
        name: 'discover-hp',
        component: DiscoverHp,
        meta: {
          showTabbar: true
        }
      },
    ]
  },
  {
    path: '/author-detail',
    name: 'author-detail',
    component: AuthorDetail,
    meta: {
      showTabbar: true
    }
  },
  {
    path: '/serialize',
    name: 'serialize',
    component: SerializeView
  },
  {
    path: '/serialize/book',
    name: 'book',
    component: SerializeBook
  },
  {
    path: '/user',
    name: 'user',
    component: UserView,
    children: [
      {
        path: '/user/setting',
        name: 'user-setting',
        component: UserSetting,
        meta: {
          showTabbar: true
        }
      },
      {
        path: '/user/hp',
        name: 'user-hp',
        component: UserHp,
        meta: {
          showTabbar: true
        }
      },
      {
        path: '/user/article',
        name: 'user-article',
        component: UserArticle,
        meta: {
          showTabbar: true
        }
      },
      {
        path: '/user/radio',
        name: 'user-radio',
        component: UserRadio,
        meta: {
          showTabbar: true
        }
      },
      {
        path: '/user/music',
        name: 'user-music',
        component: UserMusic,
        meta: {
          showTabbar: true
        }
      },
      {
        path: '/user/film',
        name: 'user-film',
        component: UserFilm,
        meta: {
          showTabbar: true
        }
      },
      {
        path: '/user/focus',
        name: 'user-focus',
        component: UserFocus,
        meta: {
          showTabbar: true
        }
      },
    ]
  },
  {
    path: '/share',
    name: 'share',
    component: ShareView,
    meta: {
      showTabbar: true
    }
  },
  {
    path: '/search',
    name: 'search',
    component: SearchView,
    meta: {
      showTabbar: true
    }
  },
  {
    path: '/discover-select',
    name: 'discover-select',
    component: DiscoverSelect,
    meta: {
      showTabbar: true
    }
  },

]



const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

// 每次创建新的页面, 记得完数据中添加一个 router的name 名
const needLoginRoute = ['make-subtotal', 'user', 'user-setting',]
// 全局路由守卫
router.beforeEach((to, from, next) => {

  if (localStorage.getItem('userStatus') == null || localStorage.getItem('userStatus') == 'false') {
    const index: number = needLoginRoute.findIndex(n => n == to.name)
    if (index != -1) {
      next({ path: '/login' })
    }
    next()
  } else {
    next()
  }
})


export default router
